<template>
    <el-form :model="form" :rules="formRules" ref="form">
        <el-form-item prop="title">
            <el-input v-model="form.title" placeholder="请输入文章名称"><span slot="append">50字以内</span></el-input>
        </el-form-item>

        <el-form-item prop="worksClassify">
            <el-select v-model="form.worksClassify" placeholder="请选择文章分类" style="margin-right: 20px;">
                <el-option label="餐厅设计" value="餐厅设计"></el-option>
                <el-option label="娱乐空间" value="娱乐空间"></el-option>
                <el-option label="休闲会所" value="休闲会所"></el-option>
                <el-option label="酒店" value="酒店"></el-option>
                <el-option label="购物中心" value="购物中心"></el-option>
                <el-option label="办公室设计" value="办公室设计"></el-option>
                <el-option label="其他" value="其他"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item prop="description">
            <el-input v-model="form.description" placeholder="文章简介"></el-input>
        </el-form-item>
        <el-form-item prop="worksContent">
            <el-input type="textarea" rows="10" v-model="form.worksContent" placeholder="正文内容"></el-input>
        </el-form-item>

        <el-form-item prop="picUrls">
            上传文章封面图
            <app-upload 
                :action="$store.state.url.uploadImage" 
                list-type="picture-card" 
                :form-data="form" form-key="picUrls" :max-num="3">
            </app-upload>
        </el-form-item>
        <el-form-item>
            <el-button v-if="mode === 'add'" type="primary" @click="onSave">立即添加</el-button>
            <el-button v-else type="primary" @click="onUpdate">立即修改</el-button>
        </el-form-item>
    </el-form>
</template>


<script>
import appUpload from '../../../component/appUpload'
import { saveWorks, listWorksInfo } from '../../../api/picture'
export default {
    name: 'pictureArticleAdd',
    props: {
        mode: String
    },
    components: {
        appUpload
    },
    data(){
        return{
            form: {
                memberId: localStorage.designerId,
                worksType: 2,
                title: '',
                worksClassify: '',
                description: '',
                picUrls: '',
                worksContent: '',
            },
            formRules: {
                title: [ { required: true, message: '请输入', trigger: 'blur' } ],
                worksClassify: [ { required: true, message: '请选择', trigger: 'change' } ],
                worksContent: [ { required: true, message: '请输入', trigger: 'blur' } ],
                description: [ { required: true, message: '请输入', trigger: 'blur' } ],
                picUrls: [ { required: true, message: '请上传', trigger: 'blur' } ],
            },
        }
    },
    methods: {
        onSave(){
            this.$refs.form.validate((valid) => {
                if (valid) {
                    saveWorks(this.form).then(rsp => {
                        if(rsp.code === 200){
                        this.$message.success('添加成功')
                        this.$router.push({name: 'myPicture'})
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        onUpdate(){
            this.$refs.form.validate((valid) => {
                if (valid) {
                    saveWorks(this.form).then(rsp => {
                        if(rsp.code === 200){
                        this.$message.success('修改成功')
                        this.$router.push({name: 'myPicture'})
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        queryImages(worksId){
            listWorksInfo(worksId).then(rsp => {
                if(rsp.code === 200 && rsp.data){
                    this.form.picUrls = rsp.data.map(v => v.worksUrl).join(',')
                    this.form.worksContent = rsp.data[0].worksContent
                }
            })
        },
    },
    created(){
        if(this.mode === 'edit'){
            this.form = JSON.parse(localStorage.workEditData)
            this.queryImages(this.form.id)
        }
    }
}
</script>

<style lang="less" scoped>
.el-form{
    padding: 20px 50px;
    .form-block{
        display: block;
        width: 100%;
        clear: both;
    }
}
</style>
